<template>
  <div class="chat-footer">
    <div class="wrapper">
      <div class="input-box">
        <div class="input-box-top">
          <el-icon size="20">
            <svg-icon name="user" size="20" />
          </el-icon>
          <el-input type="text" v-model="inputTeacher" class="teacher-input" placeholder="请输入教师姓名/ID号" clearable />
        </div>
        <div class="input-box-bottom">
          <el-input
            @keydown.enter.exact.native.prevent
            @keyup.enter.exact="sendMessage"
            type="textarea"
            class="input-area"
            :autosize="{ minRows: 1, maxRows: 3 }"
            resize="none"
            :disabled="loading"
            v-model="inputText"
            placeholder="有问题尽管问我 ~"
          />
          <!-- 录音按钮 -->
          <template v-if="!recording">
            <el-button size="large" circle plain class="speech-btn" :disabled="loading" @click="recordStart">
              <el-icon size="24">
                <svg-icon name="speech" size="24" />
              </el-icon>
            </el-button>
          </template>
          <template v-else>
            <el-button size="large" circle plain class="speeching-btn" :disabled="loading" @click="recordStop">
              <el-icon size="24" color="#fff">
                <svg-icon name="speeching" size="24" />
              </el-icon>
            </el-button>
          </template>
          <!-- 提交按钮 -->
          <template v-if="!loading">
            <el-button size="large" circle plain class="submit-btn" :class="{ disabled: !inputText }" @click="sendMessage">
              <el-icon size="40">
                <svg-icon name="send" size="24" />
              </el-icon>
            </el-button>
          </template>
          <template v-else>
            <el-button size="large" circle plain class="abort-btn" @click="abortMessage">
              <el-icon size="40" color="#fff">
                <svg-icon name="abort" size="40" />
              </el-icon>
            </el-button>
          </template>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
  import { ref, watch, defineProps, defineEmits } from 'vue';
  // 使用element-plus-x 的record组件
  import { useRecord } from 'vue-element-plus-x';
  import { ElMessage } from 'element-plus';
  const props = defineProps({
    loading: { type: Boolean, default: false },
  });
  const emits = defineEmits(['onSubmit', 'onCancel']);
  // 输入框的值
  const inputTeacher = ref('');
  const inputText = ref('');
  const sendMessage = () => {
    if (props.loading) return;
    if (!inputText.value.trim()) {
      ElMessage({
        message: '请输入您的问题',
        duration: 1000,
      });
      return;
    }
    emits('onSubmit', [inputText.value.trim(), inputTeacher.value.trim()]);
    inputText.value = '';
  };
  // 停止思考
  const abortMessage = () => {
    emits('onCancel');
  };

  const {
    start: recordStart, //主动开始录音的方法
    value: recordText, //转化为文字的值
    loading: recording, //是否正在录音的状态
    stop: recordStop, //主动结束录音的方法
  } = useRecord({
    onEnd: handleEnd, //结束录音的回调
  });

  function handleEnd(res) {
    console.log('end:', res);
  }
  // 监听的录音转化为文字的变化并赋值给输入框的值
  watch(
    recordText,
    val => {
      inputText.value = val;
    },
    { deep: true }
  );
</script>

<style lang="scss" scoped>
  .chat-footer {
    -webkit-flex-shrink: 0;
    -ms-flex-shrink: 0;
    flex-shrink: 0;
    width: 100%;
    .wrapper {
      padding: 0 40px;
    }
  }
  .input-box {
    display: flex;
    flex-direction: column;
  }
  .input-box-top {
    display: flex;
    align-items: center;
    padding: 12px 20px;
    border-radius: 20px 20px 0 0;
    border: 1px solid rgba(108, 119, 161, 0.36);
    border-bottom: none;
    background: linear-gradient(128deg, rgba(61, 68, 99, 0.46) -0.01%, rgba(29, 37, 59, 0.46) 99.98%);
  }
  .teacher-input {
    margin-left: 10px;
    :deep(.el-input__wrapper) {
      background-color: transparent;
      border: none;
      outline: none;
      box-shadow: none;
    }
    :deep(.el-input__inner) {
      &::placeholder {
        color: rgba($color: #fff, $alpha: 0.6);
      }
      color: #fff;
      // font-family: 'PingFang SC';
      font-size: 15px;
      font-style: normal;
      font-weight: 400;
      line-height: 22px;
    }
  }
  .input-box-bottom {
    display: flex;
    padding: 10px 12px;
    border-radius: 0 0 20px 20px;
    border: 1px solid rgba(108, 119, 161, 0.36);
    background: linear-gradient(128deg, rgba(61, 68, 99, 0.46) -0.01%, rgba(29, 37, 59, 0.46) 99.98%);
  }
  .input-area {
    background-color: transparent;
    // padding: 0;
    margin-right: 12px;
    display: flex;
    align-items: center;
    :deep(.el-textarea__inner) {
      border: none;
      outline: none;
      background-color: transparent;
      box-shadow: none;
      scrollbar-gutter: stable;
      &::-webkit-scrollbar {
        width: 6px;
      }
      &::-webkit-scrollbar-thumb {
        cursor: pointer;
        border-radius: 10px;
        width: 6px;
        height: 6px;
        background-color: #e1e9ec;
      }
      &::placeholder {
        color: rgba($color: #fff, $alpha: 0.6);
      }
      color: #fff;
      // font-family: 'PingFang SC';
      font-size: 15px;
      font-style: normal;
      font-weight: 400;
      line-height: 22px;
    }
  }

  .submit-btn,
  .abort-btn {
    &.disabled {
      opacity: 0.5;
    }
    background: linear-gradient(112deg, #2f41ff 10.07%, #8fccff 92.92%), #7249ff;
    border: none;
  }
  .speech-btn,
  .speeching-btn {
    background: rgba(255, 255, 255, 0.2);
    --el-button-hover-border-color: #fff;
  }
  .el-button {
    + .el-button {
      margin-left: 4px;
    }
  }
</style>
